.px2rem(@name, @px) {
    @{name}: @px / 75 * 1rem;
}

body {
    background: #f0f0f0;
}

//头部
.header {
    z-index: 99;
    width: 100%;
    .px2rem(height, 100);
    position: fixed;
    left: 0;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: white;
    color: #e61414;
    .px2rem(font-size,36);
    font-weight: bolder;
    border-bottom: 1px solid #CCCCCC;
}



.navbar {
    .px2rem(margin-top,100);
    display: flex;
    align-items: center;
    justify-content: center;
    .px2rem(height, 170);
    background: white;
    margin-bottom: 2%;
    figrue {
        width: 25%;
        text-align: center;
        img {
            .px2rem(height, 100);
            .px2rem(width, 100);
        }
        p {
            .px2rem(font-size, 26);
            color: black;
        }
    }
}
//热门主题
.theme{
    width: 100%;
    .px2rem(height,80);
    background-image: url(../img/bg-zhuti.png);
    background-size: 100% 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    border-bottom: 1px solid #CCCCCC;
    span{
        width: 20%;
        text-align: center;
        .px2rem(font-size,24);
        color: #606060;
        font-weight: bolder;
    }
}

//list1
.list1{
    width: 100%;
    .px2rem(height,160);
    border-bottom: 1px solid #CCCCCC;
    background: white;
    display: flex;
    .con{
        width: 50%;
        height: 100%;
        border-right: 1px solid #CCCCCC;
        display: flex;
        .left{
            width: 50%;
            
            h3{
                .px2rem(font-size,30);
                color: #907bf0;
                .px2rem(padding-top,50);
                font-weight: bolder;
                .px2rem(padding-left,40);
            }
            p{
                .px2rem(font-size,20);
                color: #606060;
                .px2rem(line-height,40);
                .px2rem(padding-left,40);
            }
        }
        figure{
            width: 50%;
            img{
                display: block;
                margin: 0 auto;
                width: 70%;
                .px2rem(height,120);
                .px2rem(margin-top,25)
            }
        }
    }
    .con:nth-child(2){
        h3{
            color: #e86390;
        }
    }
}

//list_nav
.list_nav{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    background: white;
    .cont{
        width: 25%;
        .px2rem(height,240);
        box-sizing: border-box;
        border-right: 1px solid #CCCCCC;
        border-bottom: 1px solid #CCCCCC;
        h2{
            .px2rem(height,60);
            .px2rem(line-height,60);
            .px2rem(font-size,26);
            font-weight: bolder;
            text-align: center;
        }
        p{
            .px2rem(height,30);
            .px2rem(line-height,30);
            .px2rem(font-size,20);
            text-align: center;
            color: #828282;
        }
        figure{
            width: 100%;
            .px2rem(height,140);
            img{
                display: block;
                margin: 0 auto;
                width: 80%;
                .px2rem(height,140)
            }
        }
    }
}
//ast
.ast{
    width: 100%;
    .px2rem(height,190);
    .px2rem(margin-top,10);
    background: white;
    display: flex;
    justify-content: center;
    align-items: center;
    img{
        display: block;
        width: 96%;
        height: 96%;
    }
}
//yao
.list_yao{
    width: 100%;
    background: white;
    display: flex;
    border-bottom: 1px solid #CCCCCC;
    .con_anv{
        width: 100/3%;
        .px2rem(height,300);
        figure{
            width: 100%;
            .px2rem(height,220);
            img{
                width: 100%;
                .px2rem(height,220);
            }
        }
        p{
           .px2rem(height,80);
           .px2rem(line-height,80);
           text-align: center;
           span:nth-child(1){
               .px2rem(font-size,26);
               color: #26a96d;
               font-weight: bolder;
           }
           span:nth-child(2){
               .px2rem(font-size,16);
               color: #666666;
               text-decoration: line-through;
           }
        }
    }
}
//footer_nav
.footer_nav{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    background: white;
    .tex{
        width: 25%;
        border-right:1px solid #CCCCCC;
        border-bottom: 1px solid #CCCCCC;
        box-sizing: border-box;
        .px2rem(height,188);
        figure{
            width: 100%;
            .px2rem(height,140);
            img{
                width: 100%;
                .px2rem(height,140);
            }
        }
        p{
            .px2rem(height,48);
            .px2rem(line-height,48);
            text-align: center;
            color: #9e9e9e;
            .px2rem(font-size,22);
        }
    }
}

//kon
.kon{
    width: 100%;
    .px2rem(height,101);
}

.footer {
    z-index: 99;
    .px2rem(height, 100);
    width: 100%;
    background: #f5f5f5;
    border-top: 1px solid #CCCCCC;
    position: fixed;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    figrue {
        width: 25%;
        text-align: center;
        img {
            .px2rem(height, 52);
            .px2rem(width, 52);
        }
        p {
            .px2rem(font-size, 20);
            color: #444444;
        }
        .actives {
            color: red;
        }
    }
}

.Empty_box {
    .px2rem(height, 100);
}